<!--弹窗输入内容组件-详细--业务-->
<template>
    <el-dialog class="dialog-wrap" v-model="mShow" width="80%" :title="option.title" :close-on-click-modal="false" draggable top="8vh" destroy-on-close>

        <el-container style="height: 74vh;" class="layout-container">
            <!--<el-aside class="layout-aside">
                <div class="nav-warp">
                    <el-scrollbar>
                        <div class="nav-item active">班车管理</div>
                    </el-scrollbar>
                </div>
            </el-aside>-->
            <el-main class="layout-main">
                <el-scrollbar>

                    <div class="subfield-layout" v-for="item in option.groupList">
                        <div class="subfield-wrap">
                            <div class="subfield-title">{{item.title}}</div>
                            <div class="subfield-main">
                                <div class="subfield-content">
                                    <template v-if="!item.isDetail">
                                        <m-form ref="formRef" :fields="item.fieldList" :value="mValue" ></m-form>
                                    </template>
                                    <template v-if="item.isDetail">
                                        <m-submodule :auth-id="item.dtlAuthId" :show-edit="true" :id="item.id" ref="subRef" :dtl-data="item.dtlData" :cols="item.cols"></m-submodule>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </el-main>
        </el-container>
        <!--<el-container class="layout-container">
        </el-container>-->
        <template #footer>
              <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="dialogConfirm">确定</el-button>
              </span>
        </template>
    </el-dialog>
</template>

<script setup>
  import {defineProps,defineEmits,watch,reactive,ref} from 'vue'

  import MForm from '@/components/common/Form/Form'
  import MSubmodule from '@/components/Submodule/Submodule'

  const props = defineProps(['option','data','show']),
    emit = defineEmits(['confirm','update:show']);

  let mValue = reactive({}),
    mShow = ref(false),
    formRef = ref(null),
    subRef = ref(null);
  watch(() => props.data,(val) =>{
    if (!Object.keys(val).length) {
      props.option.groupList.forEach(item =>{
        if (item.isDetail) item.dtlData = [];
      })
    }
    mValue = val;
  },{immediate: true});

  watch(() => props.show,(val) => {
    if (val) mShow.value = true;
  })
  watch(mShow,(val) => {
    if (!val) emit('update:show',false)
  })

  //验证表格
  async function validateAll() {
    let validates = [],valid = true;

    formRef.value.forEach((item,index) =>{
      validates.push(validateItem(index))
    });
    await Promise.all(validates).then(res =>{
      valid = res.every(item => item === true)
    });

    if (subRef.value.data) {
      let validates = []
      subRef.value.forEach((item,index) =>{
        validates.push(item.validateAll())
      });


      valid = validates.every(item => item === true)
    }
    return valid
  }
  function validateItem(key) {
    return new Promise((resolve,reject) => {
    formRef.value[key].validate(isValid => {
      resolve(isValid)
    })

    })
  }
  async function dialogConfirm() {
    if (await validateAll()) {
      let obj = {
        option: props.option,
        data: mValue,
      };
      if (subRef.value){
        subRef.value.forEach(item =>{
          if (obj.dtlData) obj.dtlData[item.id] = item.data
          else obj.dtlData = {[item.id]: item.data}
        })
      }

      emit('confirm',obj)
    }
  }

  function close() {
    mShow.value = false;
  }
  defineExpose({close})

</script>

<style scoped lang="less">
    @import '../../assets/css/pageDtl.less';

    .layout-container{
        border-top: 1px solid #e6e6e6;
    }

</style>
